<template>
<i-select v-model="currentValue" :filterable="true" placeholder="年级" :disabled="!editable">
  <i-option :value="option.index" v-for="option in options" :key="'grade_option_' + option.index" v-if="option.index !== ''">{{option.name}}</i-option>
</i-select>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      options: 'grades'
    })
  },
  methods: {
    ...mapActions({
      load: 'loadGrades'
    }),
    setCurrentValue(val) {
      if (this.currentValue === val) return
      this.currentValue = val
    }
  },
  data() {
    return {
      currentValue: this.value
    }
  },
  props: {
    value: {
      type: Number
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val)
    },
    currentValue(val) {
      this.$emit('update:value', val)
    }
  },
  mounted() {
    this.load()
  }
}
</script>
